<template>
    <div class="c-a disFlexItem">
        <div class="p-l">
            <img class="h-img" src="../assets/img/logo.jpg" alt="" />
        </div>
        <div class="p-c">群运营动态感知</div>
        <div class="p-r">
            <div class="p-r-l">
                {{ this.hours + ":" + this.minutes + ":" + this.seconds }}
            </div>
            <div class="p-r-r m-l-12">
                <div class="m-b-12" style="margin-bottom: 6px">
                    {{ "星期" + week }}
                </div>
                <div style="margin-bottom: 15px">
                    {{ year + "年" + month + "月" + day + "日" }}
                </div>
            </div>
        </div>
        <div></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                weekList: ["天", "一", "二", "三", "四", "五", "六"],
                year: "",
                month: "",
                day: "",
                weekDay: "",
                hours: "",
                minutes: "",
                seconds: "",
                week: "",
            }
        },
        created() {
            // 每秒刷新一次, 实时更新
            setInterval(() => {
                this.fnDate();
            }, 1000);
        },
        methods: {
            fnDate() {
                this.date = new Date();
                this.year = this.date.getFullYear();
                this.month = this.date.getMonth() + 1;
                this.day = this.date.getDate();
                this.hours = this.date.getHours();
                this.minutes = this.date.getMinutes();
                if (this.minutes < 10) {
                    this.minutes = "0" + this.minutes;
                }
                this.seconds = this.date.getSeconds();
                if (this.seconds < 10) {
                    this.seconds = "0" + this.seconds;
                }
                this.week = this.weekList[new Date().getDay()];
            },
        }
    }
</script>

<style  scoped>
    .c-a {
        width: 100%;
        height: 94px;
        background-image: url("../assets/img/c-header.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .disFlexItem {
        display: flex;
        justify-items: center;
        justify-content: space-between;
    }

    .p-l {
        padding-left: 30px;
        width: 21%;
    }

    .h-img {
        height: 91px;
    }

    .p-c {
        color: #fff;
        font-size: 36px;
        font-weight: bold;
        flex: 1;
        text-align: center;
        padding-top: 25px;
        letter-spacing: 40px;
        padding-left: 40px;
    }

    .p-r {
        display: flex;
        width: 21%;
        padding: 33px 0 3px;
    }

    .p-r .p-r-l {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        border-right: 1px solid white;
        padding-right: 12px;
    }

    .p-r .p-r-r {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
    }

    .m-l-12 {
        margin-left: 12px;
    }

    .m-b-12 {
        margin-bottom: 20px;
    }
</style>
